<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../vars.jsp" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ECharts">
  <meta name="author" content="kener.linfeng@gmail.com">
  <title>WAS SERVER重要指标监控</title>
  <link href="${contextPath}/page/common/css/bootstrap.css" rel="stylesheet">
  <script src="${contextPath}/page/common/js/chart/echarts.js"></script>

</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<table style="width: 100%;">
  <tr>
    <td>
      <div id="main" style="height:340px;margin:15px 15px 0px 15px;"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="sub" style="height:350px;margin:0px 15px 0px 15px;"></div>
    </td>
  </tr>
</table>
<script type="text/javascript">
  // 路径配置
  require.config({
    paths: {
      echarts: 'http://echarts.baidu.com/build/dist'
    }
  });

  // 使用
  require(
          [
            'echarts',
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
          ],
          function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));

            option = {
              title: {
                text: 'JVM 使用情况',
                subtext: '${server}'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: [${monitorJvm}]
              },
              toolbox: {
                show: true,
                feature: {
                  mark: {show: true},
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: [${monitorInfo.currentJvmDate}]
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [

                {
                  name: 'HeapSize',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [${monitorInfo.heapSize}]
                }, {
                  name: 'UsedMemory',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [${monitorInfo.usedMemory}]
                },
                {
                  name: 'FreeMemory',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [${monitorInfo.freeMemory}]
                },
                {
                  name: 'ProcessCpuUsage',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [${monitorInfo.processCpuUsage}]
                }
              ]
            };

            // 为echarts对象加载数据
            myChart.setOption(option);
          }
  );


  // 使用
  require(
          [
            'echarts',
            '${contextPath}/page/common/chart/theme/macarons',
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
          ],
          function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('sub'));

            option = {
              title: {
                text: '线程信息情况',
                subtext: 'boss-bd01-server'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['意向', '预购', '成交', 'TEST']
              },
              toolbox: {
                show: true,
                feature: {
                  mark: {show: true},
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'stack', 'tiled']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '成交',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [10, 12, 21, 54, 260, 830, 710]
                },
                {
                  name: '预购',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [30, 182, 434, 791, 390, 30, 10]
                },
                {
                  name: '意向',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [1320, 1132, 601, 234, 120, 90, 20]
                },
                {
                  name: 'TEST',
                  type: 'line',
                  smooth: true,
                  itemStyle: {normal: {areaStyle: {type: 'default'}}},
                  data: [320, 132, 101, 234, 220, 190, 120]
                }
              ]
            };

            // 为echarts对象加载数据
            myChart.setOption(option);
          }
  );
</script>

</body>